<template>
  <static-container>
    <static-container-header>
      <template>
        <el-breadcrumb
          size="large">
          <transition-group name="breadcrumb">
            <el-breadcrumb-item :to="true" :key="1" @click.native="close">佣金报表</el-breadcrumb-item>
            <template v-if="subDetail">
              <el-breadcrumb-item :to="true" :key="2" @click.native="close">会员佣金</el-breadcrumb-item>
              <el-breadcrumb-item :key="3" v-if="subDetail">{{subTitle}}</el-breadcrumb-item>
            </template>
            <template v-else>
              <el-breadcrumb-item :key="2">会员佣金</el-breadcrumb-item>
            </template>
          </transition-group>
        </el-breadcrumb>
      </template>
      <template slot="sub-title">
        时间：{{info.row.settle_date}}
        {{subBrief}}
      </template>
      <template slot="right">
        <el-button
          size="medium"
          @click="close"> 返回</el-button>
      </template>
    </static-container-header>
    <static-container-body>

      <custom-container v-if="!subDetail">
        <custom-container-body>
          <el-table :data="tableData" :loading="loading" element-loading-text="加载中..." border border-radius
          >
            <el-table-column
              align="center"
              label="有效会员">
              <template slot-scope="{row}">
                <el-button type="link" size="small"
                           @click="openThirdDetail('effect-member-detail', filters)"
                >
                  {{row.userCount}}
                </el-button>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="公司总盈利">
              <template slot-scope="{row}">
                <money-text :value="row.totalWin"></money-text>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="平台费">
              <template slot-scope="{row}">
                {{row.platfee | currency}}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="红利">
              <template slot-scope="{row}">
                {{row.bonus | currency}}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="返水">
              <template slot-scope="{row}">
                {{row.rebeat | currency}}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="存提手续费">
              <template slot-scope="{row}">
                <el-button type="link" size="small"
                           @click="openThirdDetail('member-fee-detail', {
                             settleDate: filters.settleDate,
                             rechargeFee: row.rechargeFee,
                             withdrawFee: row.withdrawFee
                           })"
                >
                  {{(row.rechargeFee + row.withdrawFee) | currency}}
                </el-button>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="累计上月">
              <template slot-scope="{row}">
                {{row.lastAmount | currency}}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="净盈利">
              <template slot-scope="{row}">
                <money-text :value="row.netWin"></money-text>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="佣金比例">
              <template slot-scope="{row}">
                {{row.commRate}}%
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="实际发放">
              <template slot-scope="{row}">
                {{row.commAmount | currency}}
              </template>
            </el-table-column>

            <template slot="empty">
              <div class="el-table__empty">
                <svg-icon class="el-table__empty-icon" icon-class="grid-empty-2"></svg-icon>
                <div class="el-table-text">暂无数据</div>
              </div>
            </template>
          </el-table>

          <div class="el-pagination-container">
            <el-warning style="margin-top: 10px" align="top">
              注意事项：<br/>
              1.公司总输赢，红色负数为会员盈利，绿色正数为公司盈利<br/>
              2.实际发放：(公司净输嬴+累计上月)×佣金比例-返水<br/>
              &nbsp;&nbsp;&nbsp;(1)公司净盈利=公司总输赢(投注-派奖)–成本总计<br/>
              &nbsp;&nbsp;&nbsp;(2)成本总计：红利+存提款手续费+游戏平台费(公司输则平台费为0)<br/>
              &nbsp;&nbsp;&nbsp;(3)累加上月：上月公司总输嬴–成本总计<br/>
              3.当公司净输嬴为负数时（会员盈利）或 未满足有效会员数，佣金比例则显示0
            </el-warning>
          </div>
        </custom-container-body>
      </custom-container>
      <component
        v-else
        :is="componentName"
        :info="subDetail"
      ></component>
    </static-container-body>
  </static-container>
</template>

<script>
  import {memberCommissionApi as getApi} from '@/services/api/report';

  import {grid} from '@/build';
  import EffectMemberDetail from './effect-member-detail';
  import MemberFeeDetail from './member-fee-detail';

  export default {
    name: "low-member-detail",

    components: {
      MemberFeeDetail,
      EffectMemberDetail
    },

    mixins: [grid],

    props: ['info'],

    inject: ['closeDetail'],

    data() {
      return {
        filters: {
          settleDate: this.info.row.settle_date,
        },
        componentName: undefined,
        subDetail: undefined,
        tableData: [],
      };
    },

    methods: {
      openThirdDetail(component, row) {
        this.componentName = component;
        this.subDetail = row;
      },
      closeThirdDetail() {
        this.componentName = undefined;
        this.subDetail = undefined;
      },
      close() {
        if (this.subDetail) {
          this.closeThirdDetail();
        } else {
          this.closeDetail();
        }
      }
    },

    computed: {
      subTitle() {
        if (this.componentName === 'effect-member-detail') {
          return '有效会员';
        } else {
          return '存提手续费';
        }
      },
      subBrief() {
        if (this.subDetail) {
          if (this.componentName === 'effect-member-detail') {
            return `有效会员：${_.result(this.tableData, '0.userCount')}`;
          } else {
            return `存提手续费：${_.currency(this.subDetail.rechargeFee + this.subDetail.withdrawFee)}`;
          }
        } else {
          return `会员佣金：${_.currency(_.result(this.info, 'row.comm_amount'))}`;
        }
      }
    },

    mounted() {
      this.bindGet(getApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        format: (data) => {
          return [data];
        }
      });

      this.getAll();
    }
  };
</script>

<style scoped>

</style>
